<template>
    <div>
        <el-tabs v-model.trim="activeName">
            <el-tab-pane name="Instructions" v-if="!menuName.includes('testAnaly') && option.description[0].url">
                <div slot="label" style="font-size: 16px;">
                    <span>图表说明</span>
                </div>
                <img :src="option.description[0].url" width="100%" />
            </el-tab-pane>
            <el-tab-pane name="analysisSetting">
                <!-- v-if="option.type !== 3" -->
                <div slot="label" style="font-size: 16px;">
                    <span>分析设置</span>
                </div>
                <analysisConfig v-on="$listeners" v-bind="$attrs" @startDraw="startDraw" />
            </el-tab-pane>
            <el-tab-pane name="chartInfo" :disabled="activeName !== 'chartInfo'">
                <!-- v-if="option.type !== 3" -->
                <div slot="label" style="font-size: 16px;">
                    <span>图表调整</span>
                </div>
                <chartConfig v-on="$listeners" v-bind="$attrs" />
            </el-tab-pane>
            <el-tab-pane name="specification" v-if="!menuName.includes('testAnaly') && option.specification[0].url">
                <div slot="label" style="font-size: 16px;">
                    <span>说明书</span>
                </div>
                <img :src="option.specification[0].url" width="100%" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
import chartConfig from './chartConfig'
import analysisConfig from './analysisConfig'
export default {
    name: 'GenescloudUiDetails',
    components: {
        chartConfig, analysisConfig
    },
    data() {
        return {
            activeName: 'analysisSetting',
            option: {},
            menuName: null,
        };
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        //是否测试页面
        this.menuName = this.$route.fullPath
    },
    mounted() {

    },

    methods: {
        init(value) {
            this.option = deepClone(value)
        },
        startDraw(value) {
            this.activeName = 'chartInfo'
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
    max-height: calc(100vh - 215px);
    overflow-y: auto;

    &::-webkit-scrollbar {
        background-color: transparent;
        width: 6px;
        height: 10px;
    }

    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(50, 50, 50, 0.25);
        border: 0;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
        background-color: rgba(50, 50, 50, 0.05);
    }
}

::v-deep .el-tabs__header {
    padding-right: 20px;
}

::v-deep .el-tabs__item {
    height: 50px;
    line-height: 50px;
}
</style>